import React, { useEffect, useState } from "react";

import { Chart } from "@antv/g2";

function AntvVisit({ target }) {
  const [renderNum, setRenderNum] = useState(0);
  useEffect(() => {
    initEcharts();
  }, []);
  const initEcharts = () => {
    if (renderNum === 0) {
      setRenderNum(renderNum + 1);
      const data = [
        { time: "Mon", call: 4, waiting: 2, people: 2 },
        { time: "Tue", call: 2, waiting: 6, people: 3 },
        { time: "Wed", call: 13, waiting: 2, people: 5 },
        { time: "Thu", call: 9, waiting: 9, people: 1 },
        { time: "Fri", call: 5, waiting: 2, people: 3 },
        { time: "Sat", call: 8, waiting: 2, people: 1 },
        { time: "Sun", call: 13, waiting: 1, people: 2 },
      ];
      const chart = new Chart({
        container: target,
        autoFit: true,
        height: 250,
      });
      chart.data(data);
      chart.scale({
        people: {
          min: 0,
          max: 10,
        },
        waiting: {
          min: 0,
          max: 10,
        },
      });
      chart.legend({
        custom: true,
        items: [
          { value: "waiting", name: "评论数", marker: { symbol: "square", style: { fill: "#3182bd", r: 5 } } },
          { value: "people", name: "访问量", marker: { symbol: "hyphen", style: { stroke: "#fdae6b", r: 5, lineWidth: 3 } } },
        ],
      });
      chart.axis("people", {
        grid: null,
        title: {
          style: {
            fill: "#fdae6b",
          },
        },
        label: {
          style: {
            fill: "#fdae6b",
          },
        },
      });
      chart.axis("waiting", {
        title: {},
      });
      chart.tooltip({
        shared: true,
      });
      chart.interval().position("time*waiting").color("#3182bd");
      chart.line().position("time*people").color("#fdae6b").size(3).shape("smooth");
      chart.point().position("time*people").color("#fdae6b").size(3).shape("circle");
      chart.interaction("active-region");
      chart.removeInteraction("legend-filter"); // 自定义图例，移除默认的分类图例筛选交互
      chart.render();
    }
  };
  return <></>;
}

export default AntvVisit;

// const dr = () => {
//   // 基于准备好的dom，初始化echarts实例
//   let myChart = echarts.init(document.getElementById('main'));
//   // 绘制图表
//   myChart.setOption({
//     title: {
//       text: '每周用户访问指标',
//     },
//     tooltip: {
//       trigger: 'axis',
//       axisPointer: {
//         type: 'cross',
//         crossStyle: {
//           color: '#999',
//         },
//       },
//     },
//     toolbox: {
//       feature: {
//         dataView: { show: true, readOnly: false },
//         magicType: { show: true, type: ['line', 'bar'] },
//         restore: { show: true },
//         saveAsImage: { show: true },
//       },
//     },
//     legend: {
//       date: ['Evaporation', 'Precipitation', 'Temperature'],
//     },
//     xAxis: [
//       {
//         type: 'category',
//         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
//         axisPointer: {
//           type: 'shadow',
//         },
//       },
//     ],
//     yAxis: [
//       {
//         type: 'value',
//         min: 0,
//         max: 400,
//         interval: 100,
//       },
//     ],
//     series: [
//       {
//         name: '评论数',
//         type: 'bar',
//         color: '#C23531',
//         data: [250, 200, 174, 318, 247, 360, 265],
//       },
//       {
//         name: '访问量',
//         data: [213, 230, 124, 318, 135, 247, 260],
//         type: 'line',
//         color: '#000',
//       },
//     ],
//   });
// };
